<template>
    <div v-if="args.disable_process">PROCESSES DISABLED (press 'z' to display)</div>
    <div v-else>
        <glances-plugin-processcount :sorter="sorter" :data="data"></glances-plugin-processcount>
        <div class="row" v-if="!args.disable_amps">
            <div class="col-lg-18">
                <glances-plugin-amps :data="data"></glances-plugin-amps>
            </div>
        </div>
        <glances-plugin-processlist
            :sorter="sorter"
            :data="data"
            @update:sorter="args.sort_processes_key = $event"
        ></glances-plugin-processlist>
    </div>
</template>

<script>
import { store } from '../store.js';
import GlancesPluginAmps from './plugin-amps.vue';
import GlancesPluginProcesscount from './plugin-processcount.vue';
import GlancesPluginProcesslist from './plugin-processlist.vue';

export default {
    components: {
        GlancesPluginAmps,
        GlancesPluginProcesscount,
        GlancesPluginProcesslist
    },
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            store,
            sorter: undefined
        };
    },
    computed: {
        args() {
            return this.store.args || {};
        },
        sortProcessesKey() {
            return this.args.sort_processes_key;
        }
    },
    watch: {
        sortProcessesKey: {
            immediate: true,
            handler(sortProcessesKey) {
                const sortable = [
                    'cpu_percent',
                    'memory_percent',
                    'username',
                    'timemillis',
                    'num_threads',
                    'io_counters',
                    'name'
                ];
                function isReverseColumn(column) {
                    return !['username', 'name'].includes(column);
                }
                function getColumnLabel(value) {
                    const labels = {
                        io_counters: 'disk IO',
                        cpu_percent: 'CPU consumption',
                        memory_percent: 'memory consumption',
                        cpu_times: 'process time',
                        username: 'user name',
                        name: 'process name',
                        timemillis: 'process time',
                        None: 'None'
                    };
                    return labels[value] || value;
                }
                if (!sortProcessesKey || sortable.includes(sortProcessesKey)) {
                    this.sorter = {
                        column: this.args.sort_processes_key || 'cpu_percent',
                        auto: !this.args.sort_processes_key,
                        isReverseColumn,
                        getColumnLabel
                    };
                }
            }
        }
    }
};
</script>